<div class="row">
  <div class="col-sm-12 col-lg-12">
    <div>
      <cd-table-actions class="btn-group mb-4"
                        [permission]="permission"
                        [selection]="selection"
                        [tableActions]="createTableActions">
      </cd-table-actions>
    </div>
    <div class="card">
      <div class="card-header"
           i18n>Multi-site Topology viewer</div>
      <div class="card-body">
        <div class="row">
          <div class="col-sm-6 col-lg-6 tree-container">
            <i *ngIf="loadingIndicator"
               [ngClass]="[icons.large, icons.spinner, icons.spin]"></i>
            <tree-root #tree
                       [nodes]="nodes"
                       [options]="treeOptions"
                       (updateData)="onUpdateData()">
              <ng-template #treeNodeTemplate
                           let-node>
                <span *ngIf="node.data.name"
                      class="me-3">
                  <i [ngClass]="node.data.icon"></i>
                    {{ node.data.name }}
                </span>
                <span *ngIf="node.data.type"
                      class="badge badge-info me-3">
                    {{ node.data.type }}
                </span>
                <span class="badge badge-success me-2"
                      *ngIf="node.data.is_default">
                  default
                </span>
                <span class="badge badge-warning me-2"
                      *ngIf="node.data.is_master">
                  master
                </span>
                <div class="btn-group align-inline-btns"
                     *ngIf="node.isFocused"
                     [title]="title"
                     role="group">
                  <button type="button"
                          class="btn btn-light dropdown-toggle-split ms-1"
                          (click)="openModal(node, true)"
                          [disabled]="getDisable()"
                          ngbDropdownToggle>
                    <i [ngClass]="[icons.edit]"></i>
                  </button>
                  <button type="button"
                          title="Delete"
                          class="btn btn-light ms-1"
                          i18n-title
                          (click)="delete(node)">
                    <i [ngClass]="[icons.destroy]"></i>
                  </button>
                </div>
              </ng-template>
            </tree-root>
          </div>
          <div class="col-sm-6 col-lg-6 metadata"
               *ngIf="metadata">
            <legend>{{ metadataTitle }}</legend>
            <cd-table-key-value [data]="metadata"></cd-table-key-value>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
